<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>5.6缩放</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 2px solid blue;
			}
			
			.option-wrapper{
				width: 300px;
				height: 300px;
				background: "red";
			}
		</style>
	</head>

	<body>
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
			<div class="option-wrapper">
			<input type="button" name="max" id="max" value="放大" />
			<input type="button" name="min" id="min" value="缩小" />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			let oCanvas = document.getElementById('canvas');
			console.dir(oCanvas);
			let oPen = oCanvas.getContext("2d");
			
			oPen.fillStyle="blue";
			oPen.fillRect(0,0,80,80);
			
			/*x在x轴上缩放x倍  y在y轴上缩放y倍
			  scale(x,y);*/
			 /*oPen.fillStyle="pink";
			 oPen.scale(2,2);
			 oPen.fillRect(0,0,100,100);*/
			 
			 let oMaxBtn=document.getElementById('max');
			  oMaxBtn.onclick=function(){
			  	scale(1.5,1.5);
			  }
			 let oMinBtn=document.getElementById('min');
			  oMinBtn.onclick=function(){
			  	scale(0.5,0.5);
			  }
			 function scale(x,y){
			  	oPen.clearRect(0,0,500,500);
			  	oPen.scale(x,y);
			  	oPen.fillStyle="blue";
			  	oPen.fillRect(0,0,80,80);
			  }
		}
	</script>
	</body>

</html>